import React from 'react';
import Button from 'bootstrap/Button';

class Counter extends React.Component {
    constructor(props) {
        super(props);
        this.incrementAsync = this.incrementAsync.bind(this);
        this.incrementIfOdd = this.incrementIfOdd.bind(this);
    }

    incrementAsync() {
        setTimeout(this.props.onIncrement, 1000);
    }

    incrementIfOdd() {
        if(this.props.value % 2 === 1) {
            this.props.onIncrement();
        }
    }

    render() {
        const { value, onIncrement, onDecrement } = this.props;
        return (
            <div className="counter">
                Clicked: { value } times
                <Button onClick={ onIncrement }>+</Button>
                <Button onClick={ onDecrement }>-</Button>
                <Button onClick={ this.incrementIfOdd }>Increment if odd</Button>
                <Button onClick={ this.incrementAsync }>Increment aysnc</Button>
            </div>
        );
    }
};

export default Counter;